<style lang="scss" scoped>
  @import '@/assets/css/variable';
 .item {
 	// margin-top: 0.4rem;
 	// margin-left: 1rem;
 	// margin-right: 1rem;
 	padding: 10px 6px 10px 6px;
 	background-color: white;
 	border-bottom: 1px solid #f7f7f7;
 	display: flex;
 	.flex-right {
 		flex: 0 0 90px;
 		height: 70px;
 		overflow: hidden;
 		position: relative;
		img{
			object-fit: cover;
			width: 100%;
		}
 	}
 					
 	.flex-left {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		margin-right: 10px;
 		.title {
 			text-overflow: ellipsis;
 			display: -webkit-box;
 			-webkit-line-clamp: 2;
 			/* 设置行数 */
 			-webkit-box-orient: vertical;
 			color: #555;
 			font-size: 1.5rem;
 			line-height: 1.3em;
 			overflow: hidden;
			justify-content: space-around;
			text-align: justify;
 		}
 		.line{
 			color: $color2;
 			.time{
 				margin-left: 10px;
 			}
 		}
 		.desc {
 			display: flex;
 			justify-content: space-between;
 			margin-bottom: 2px;
 			span {
 				color: #D8D7D7;
 				&.split {
 					font-size: 1rem;
 				}
 			}
 		}
 		.instudy{
 			color:$color2;
 		}
 		.badgeBox {
 			padding-bottom: 0.4rem;
 			margin-top: 0.6rem;
 			.badge {
 				padding: 0.2rem 1rem;
 				font-size: 1.2rem;
 				background-color: #FFECDC;
 				color: #FF6D00;
 				border: 0.1rem solid #FF6D00;
 				border-radius: 0.3rem;
 				box-sizing: border-box;
 				overflow: hidden;
 			}
 					
 			.badge4status {
 				padding: 0.2rem 1rem;
 				font-size: 1.2rem;
 				background-color: #E8E9E9;
 				color: #999;
 				border: 0.1rem solid #999;
 				border-radius: 0.3rem;
 				box-sizing: border-box;
 				overflow: hidden;
 			}
 		}
 	}
 }
</style>
<template>
  <div class="item">
  	<div class="flex-left">
  		<div class="title">{{renderList.title}}</div>
  		<div class="line">
  			<span>{{renderList.unit}}</span>
  			<span class="time">{{renderList.updateTime}}</span>
  		</div>
  	</div>
  	<div class="flex-right">
  		<img :src="renderList.img" alt="">
  	</div>
  </div>
</template> 
<script>
import { Image as VanImage, Popup,Button,Toast,Icon } from 'vant';
export default {
  name: "CaseList",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Popup.name]: Popup,
    VanImage
  },
  props: {
    caseList: {
      type: Array,
    },
	
	renderList: {
		type: Object
	}
  },
  data() {
    return {
      show: false,
      caseItem: {}
    }
  },
  created () {
    // console.log(this.datalist);
    const _this = this;
    //const caseList = _this.$store.getters.getCaseTabsList;
    
  },
  methods: {	  
	// toView(path){
	// 	this.$router.push(path)
	// },
  getCaseById(id) {
      const _this = this;
      const toast = Toast.loading({
          forbidClick: true,
          message: '加载中...',
      });
      let params = {
          id: id
      }
      _this.$request.getCaseById(params).then(res=>{
          _this.caseItem = res.data
          // this.$store.commit('setCaseItem', _this.caseItem);
          toast.clear()
          _this.show = true
      })
  },
  }
};
</script>
